<template>
  <div class="tarbar">
    <ul>
      <li
        :class="{ active: $route.path == item.path }"
        v-for="(item, index) in routerList"
        :key="index"
        @click="swicth(item.path)"
      >
        <span :class="item.icon"></span>
        <div>{{ item.title }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      routerList: [
        {
          title: "首页",
          path: "/home",
          icon: "iconfont icon-31shouye",
        },
        {
          title: "分类",
          path: "/list",
          icon: "iconfont icon-fenlei",
        },
        {
          title: "购物车",
          path: "/car",
          icon: "iconfont icon-gouwuchekong",
        },
        {
          title: "我的",
          path: "/my",
          icon: "iconfont icon-wode",
        },
      ],
    };
  },
  methods: {
    swicth(path) {
      // 跳转路由
      if (this.$route.path == path) {
        return;
      }
      this.$router.push(path);
      document.querySelector("body").removeAttribute("style");
    },
  },
};
</script>

<style scoped  lang='scss'>
.active {
  color: #b0352f;
}
.tarbar {
  background-color: white;

  height: 1.4595rem;
  width: 100%;
}
ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  font-size: 0.3243rem;
  height: 1.4595rem;
  align-items: center;

  li {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .iconfont {
    font-size: 0.6rem;
  }
}
</style>